
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>ERT生成</title>
  <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>

<div class="layui-container">
  <div class="layui-progress" style="margin: 15px 0 30px;">
    <div class="layui-progress-bar" lay-percent="100%"></div>
  </div>
  
  
  <div class="layui-container">

    <div class="layui-row">
      <div class="layui-col-md6">
        <!-- <form class="layui-form" enctype="multipart/form-data" action="http://47.119.187.14:9004/pro-api/ertBuild" method="POST"> -->
          <form class="layui-form" id = "formOne">
            <!-- <form class="layui-form" enctype="multipart/form-data" action="http://localhost:8093/ertBuild" method="POST">  -->
          <div class="layui-form-item">
            <label class="layui-form-label" style="width: 120px;">需计算ert文件</label>
            <div class="layui-input-inline">
              <!-- <input type="file" name="calcu"> -->
              <button type="button" class="layui-btn" id="calcu">
                <i class="layui-icon">&#xe67c;</i>上传Excle
              </button>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label" style="width: 120px;">目标ERT文件</label>
            <div class="layui-input-inline">
              <!-- <input type="file" name="target"> -->
              <button type="button" class="layui-btn" id="target">
                <i class="layui-icon">&#xe67c;</i>上传Excle
              </button>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label" style="width: 120px;">步长</label>
            <div class="layui-input-inline">
              <input type="text" name="step" value="0.5" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">输出类型</label>
            <div class="layui-input-block">
              <input type="radio" name="fileType" value="excle" title="excle">
              <input type="radio" name="fileType" value="dat" title="dat" checked>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button  class="layui-btn" lay-submit lay-filter="formOne">立即提交</button>
              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
          </div>
        </form>
      </div>
      <div class="layui-col-md6">
        <img src="./image/1.png" width="100%"><br/><br/>
        <img src="./image/2.png" width="100%">
      </div>
    </div>
    <blockquote class="layui-elem-quote" style="margin-top: 50px;">不含中文目录的dat压缩文件（zip格式）</blockquote>
      <div class="layui-row">
        <div class="layui-col-md6">
      <form class="layui-form"  enctype="multipart/form-data" action="http://192.168.1.115:8093/mergeDat" method="POST">
        <!-- <form class="layui-form" enctype="multipart/form-data" action="http://47.119.187.14:9004/pro-api/mergeDat" method="POST"> -->
          <!-- <form class="layui-form"  enctype="multipart/form-data" action="http://localhost:8093/mergeDat" method="POST">  -->
      <div class="layui-form-item">
        <label class="layui-form-label" style="width: 120px;">zip文件</label>
        <div class="layui-input-inline">
          <input type="file" name="file" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button type="submit" class="layui-btn">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
    </div>
    <div class="layui-col-md6"><img src="./image/3.png" width="100%"></div>
    </div>

  </div>
</div>



<!-- 引入 layui.js 的 <script> 标签最好放置在 html 末尾 -->
<script src="layui/layui.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
layui.use(['layer', 'form', 'upload', 'laydate','jquery'], function() {
	let layer = layui.layer;
	let form = layui.form;
	let upload = layui.upload;
	let laydate = layui.laydate;
  var $ = layui.$ //重点处

  // 文件
  let target;
		upload.render({
			elem: '#target',
			url: './image',
			auto: false, // 选择文件后不自动上传
			// bindAction: '#save', // 指向一个按钮触发上传
			accept: 'file',
      field:"target",
      exts: 'xlsx',
			choose: function(obj) {
				obj.preview(function(index, file, result) {
          $('#target').text(file.name); // 图片链接（base64）
					target = file;
				});
			}
		});
    // 文件
    let calcu;
		upload.render({
			elem: '#calcu',
			url: './image',
			auto: false, // 选择文件后不自动上传
			// bindAction: '#save', // 指向一个按钮触发上传
			accept: 'file',
      exts: 'xlsx',
      field:"calcu",
			choose: function(obj) {
				obj.preview(function(index, file, result) {
          $('#calcu').text(file.name); // 图片链接（base64）
					calcu = file;
				});
			}
		});
    form.on('submit(formOne)', function(formData){
      let myForms = $('#formOne')[0];
      let formdatas = new FormData(myForms);
      var index = layer.load(1, {shade: true}); //0代表加载的风格，支持0-2
      axios({
          method: 'post',
          url: "http://47.119.187.14:9004/pro-api/ertBuild",
          data:formdatas,
          responseType: "blob"
        })
        .then(res => {
          // 假设 data 是返回来的二进制数据
          const data = res.data
          let url
          if(formData.field.fileType == 'dat'){
            url = window.URL.createObjectURL(new Blob([data], {type: "application/zip"}))
          }else{
            url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
          }
          const link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          let file = $('#calcu').text()
          link.setAttribute('download', file.substr(0,file.lastIndexOf(".")))
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
          layer.close(index);
        })


      // $.ajax({
      //       cache : true,
      //       type : "post",
      //       url : "http://localhost:8093/ertBuild",
      //       /* data : $('#signupForm').serialize(), */ // 你的formid
      //       data : formdatas,  // 你的formid
      //       // async : false,
      //       responseType: "blob",
      //       contentType: false,   //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
      //       processData: false,   //当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
      //       error : function(request) {
      //           parent.layer.alert("网络超时");
      //       },
      //       success : function(data) {
      //           const blob = new Blob([data], {
      //             type: 'application/zip' // 将会被放入到blob中的数组内容的MIME类型
      //           })
      //           console.log(blob)
      //           const objectUrl = URL.createObjectURL(blob) // 生成一个url
      //           window.location.href = objectUrl // 浏览器打开这个url
      //       }
      //   });
      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });
      
})

</script>
</body>
</html>
